<template>
  <div class="h-full pb-60 m-relative boc">
    <div class="p-20 box-full overflow-y-auto flex flex-j-c">
      <a-form :model="form" class="mt-20" size="medium" auto-label-width label-align="left">
        <a-form-item label="真实姓名：" file="realName">
          <a-input v-model="form.realName" placeholder="请输入" allow-clear />
        </a-form-item>
        <a-form-item label="支付宝账号：" file="account">
          <a-input v-model="form.account" placeholder="请输入" allow-clear />
        </a-form-item>
        <div class="w-full h-1 mb-20"></div>
        <a-form-item label="渠道手机号：" file="mobile">
          {{ form?.mobile }}
        </a-form-item>
        <a-form-item label="验证码：">
          <a-input placeholder="验证码" v-model="form.code" class="w-40n mr-10"> </a-input>
          <a-button @click="handleChannelIncomeSendCode" :disabled="codeDisabled">{{ codeStr }}</a-button>
        </a-form-item>
      </a-form>
    </div>
    <div class="m-absolute border-box b-0 l-0 r-0 h-60 flex flex-a-c bt-f0 px-20 flex-j-e">
      <a-space>
        <a-button @click="onClose(0)">取消</a-button>
        <a-button type="primary" :loading="loading" @click="onOk">确定</a-button>
      </a-space>
    </div>
  </div>
</template>

<script setup>
import { withdrawalBindAlipaySms, withdrawalAlipayBind, withdrawalBasicInfo } from '@/apis'
import { Message } from '@arco-design/web-vue'
import { reAssign } from '@/utils/common'
const props = defineProps(['onClose'])
const codeStr = ref('获取验证码')
const loading = ref(false)
const codeDisabled = ref(false)
const form = reactive({
  realName: undefined,
  account: undefined,
  mobile: undefined,
  code: undefined
})

const getInfo = async () => {
  const res = await withdrawalBasicInfo()
  reAssign(form, res.data)
  form.mobile = res.data.contactPhone
  form.realName = res.data.alipayName
}

onMounted(() => {
  getInfo()
})

const handleChannelIncomeSendCode = async () => {
  codeDisabled.value = true
  try {
    await withdrawalBindAlipaySms({
      mobile: form.mobile
    })
    Message.success('验证码已发送')
    let count = 60
    const timer = setInterval(() => {
      count--
      codeStr.value = `${count}秒后可重试`
      if (count === 0) {
        clearInterval(timer)
        codeStr.value = '获取验证码'
        codeDisabled.value = false
      }
    }, 1000)
  } catch (error) {
    codeDisabled.value = false
  }
}

// 点击确认添加/编辑
const onOk = async () => {
  try {
    loading.value = true
    if (!form.realName) return Message.error('真实姓名不能为空')
    if (!form.account) return Message.error('支付宝账号不能为空')
    if (!form.code) return Message.error('验证码不能为空')
    await withdrawalAlipayBind(form)
    Message.success('修改成功')
    getInfo()
    props.onClose()
  } finally {
    loading.value = false
  }
}
</script>
<style scoped lang="scss">
.bgccc {
  background: #eee;
}
.borderccc {
  border: 1px solid #eee;
}
.boc {
  :deep(.arco-input-outer) {
    border-radius: 4px !important;
  }
}
.h-1 {
  height: 0px !important;
  border-bottom: 1px solid #5c5c5c;
  opacity: 0.4;
}
</style>
